<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Apifox中生成Axios测试用例文档指南</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            line-height: 1.6;
        }
        h1, h2, h3 {
            color: #333;
        }
        code {
            background-color: #f4f4f4;
            padding: 2px 4px;
            border-radius: 3px;
        }
        pre {
            background-color: #f4f4f4;
            padding: 10px;
            border-radius: 5px;
            overflow-x: auto;
        }
        .step {
            margin-bottom: 30px;
        }
        .note {
            background-color: #e7f3ff;
            border-left: 4px solid #2196F3;
            padding: 10px;
            margin: 15px 0;
        }
    </style>
</head>
<body>
    <h1>如何在Apifox中生成Axios测试用例文档</h1>
    
    <div class="note">
        <p><strong>注意：</strong>Apifox主要用于API文档管理，不能直接生成前端Axios测试用例文档，但可以在API文档中添加Axios调用示例。</p>
    </div>

    <div class="step">
        <h2>1. 在Apifox中创建API接口</h2>
        <p>首先，在Apifox中创建你的API接口定义：</p>
        <ol>
            <li>登录Apifox并进入你的项目</li>
            <li>点击"API设计"模块</li>
            <li>创建新的API接口或导入现有接口定义</li>
            <li>完善接口信息，包括路径、方法、参数、响应等</li>
        </ol>
    </div>

    <div class="step">
        <h2>2. 添加Axios代码示例</h2>
        <p>在API接口详情页面中添加Axios代码示例：</p>
        <ol>
            <li>在接口详情页，找到"代码示例"标签</li>
            <li>Apifox默认支持生成Axios代码示例</li>
            <li>如果没有，可以手动添加自定义代码示例</li>
        </ol>
    </div>

    <div class="step">
        <h2>3. 示例Axios代码</h2>
        <p>以下是我们之前测试用例中使用的Axios代码示例：</p>
        
        <h3>GET请求示例</h3>
        <pre><code>// 获取单个文章信息
axios.get('https://jsonplaceholder.typicode.com/posts/1')
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.error(error);
  });</code></pre>

        <h3>POST请求示例</h3>
        <pre><code>// 创建新文章
axios.post('https://jsonplaceholder.typicode.com/posts', {
    title: '测试标题',
    body: '测试内容',
    userId: 1
})
.then(function (response) {
    console.log(response.data);
})
.catch(function (error) {
    console.error(error);
});</code></pre>

        <h3>并发请求示例</h3>
        <pre><code>// 同时获取文章和用户信息
axios.all([
    axios.get('https://jsonplaceholder.typicode.com/posts/1'),
    axios.get('https://jsonplaceholder.typicode.com/users/1')
])
.then(axios.spread(function (postResponse, userResponse) {
    console.log('文章:', postResponse.data);
    console.log('用户:', userResponse.data);
}))
.catch(function (error) {
    console.error(error);
});</code></pre>
    </div>

    <div class="step">
        <h2>4. 发布和分享文档</h2>
        <p>将包含Axios示例的API文档发布给团队成员：</p>
        <ol>
            <li>在Apifox中点击"发布"按钮</li>
            <li>设置文档访问权限</li>
            <li>生成分享链接</li>
            <li>团队成员可以通过链接访问包含Axios示例的API文档</li>
        </ol>
    </div>

    <div class="step">
        <h2>5. 与现有测试用例结合</h2>
        <p>你可以将之前创建的测试用例中的Axios代码整理后添加到Apifox文档中：</p>
        <ul>
            <li>将每个API接口的调用示例添加到对应接口文档中</li>
            <li>添加详细的参数说明和返回值解释</li>
            <li>提供错误处理的最佳实践示例</li>
        </ul>
    </div>

    <div class="note">
        <p><strong>提示：</strong>虽然Apifox不能直接生成前端测试用例文档，但通过在API文档中添加丰富的代码示例和使用说明，可以达到类似的效果，方便前端开发人员使用Axios调用API。</p>
    </div>
</body>
</html>